
<template>
<div>
  <div class="my-home-page" :style="'padding-top:'+statusBarHeight+'px'" @touchstart='handletouchstart' @touchmove='handletouchmove' @touchend='handletouchend' @touchcancel='handletouchcancel'>   
    <div class="swiper"  :style="'top:'+statusBarHeight+'px'">
      <div class="indicator-box"  :style="'top:'+statusBarHeight+'px'">
        <div class="indicator-group" >
          <span v-for="(item,index) in imgUrls" :key="item" :class="{'active':current==index}" v-if="imgUrls.length>1"></span> 
        </div> 
      </div> 
      <swiper
        :indicator-dots="false"
        :autoplay="true"
        :interval="5000"
        :duration="100"
        :current="current" 
        @change="bindchange"
        :style="'height:100%;width:100%;'"
      >
        <block v-for="item in imgUrls" :key="item">
          <swiper-item class="swiper-img-box" >
            <div style="width:100%;height:100%;" :style="'transform:scale('+transformShow+')'">
              <image mode="aspectFill" :src="item.link" class="img"  :class="{'off-left':offLeft,'off-right':offRight}"/> 
            </div> 
            <div class="block-left" @click.stop="swiperClis('down')"></div> 
            <div class="block-right" @click.stop="swiperClis('up')"></div>  
          </swiper-item>   
        </block>  
      </swiper> 
      <!--标签-->
      <div> 
        <div class="like-img" v-if="btnScaleShow==1">
          <image class="img"  src='/static/image/select-like.png'  ></image> 
        </div>
        <div class="super-like-img" v-if="btnScaleShow==3">
          <image class="img"  src='/static/image/select-super-like.png'  ></image> 
        </div>
      </div>
    </div>
    <!--内容--> 
    <div class="content-box" >
      <div class="page-content"> 
        <div class="page-back" @click="goBack">
          <image  src="/static/image/hmoe-back.png" :class="{'page-back-transform':homePageSwitch }" class="img"/> 
        </div>
        <div class="basics-data">
          <div class="name">{{userInfo.nickname}}&nbsp;&nbsp;<span>{{userInfo.age}}</span></div>
          <div class="info-list " v-if="userInfo.industry">
            <image class="classroom-img " src="/static/image/home-classroom.png"></image>
            <span>{{userInfo.industry}}</span>  
          </div>
          <div class="info-list" v-if="userInfo.school">
            <image class="school-img " src="/static/image/home-school.png"></image>
            <span>{{userInfo.school}}</span>  
          </div>
          <!--<div class="info-list ">
            <image class="location-img " src="/static/image/home-location.png"></image>
            <span> 12 km</span>  
          </div>-->
        </div>

        <div class="introduce"> {{userInfo.introduce}} </div>

        <div class="audio-book"> 
          <div class="title"><span v-if="totalNum>=0">{{totalNum}}</span>&nbsp;部喜欢的影·音·书</div>
          <div class="main-box">
            <scroll-view scroll-x  class="scroll-view "  style="width: 100%"> 
              <home-book  v-for="item in musicsArr" :title="item.name" :link="item.cover" type="musics" :key="item" @jumpLink="jumpHomeBook"></home-book> 
              <home-book width="112rpx" v-for="item in booksArr" :title="item.name" :link="item.cover" type="books" :key="item" @jumpLink="jumpHomeBook "></home-book> 
              <home-book width="112rpx"  v-for="item in moviesArr" :title="item.name" :link="item.cover" type="movies" :key="item" @jumpLink="jumpHomeBook"></home-book> 
            </scroll-view>
          </div>
          <div class="footer-btn"> 
            <button  class="tabbar-item" style="margin-left:0" open-type="share" data-name="pageShare" >
              <div class="footer-btn-box text-center shear">分享给好友</div>  
            </button> 
            <!--<div class="footer-btn-box text-center report">举报该用户</div>--> 
          </div>

          <div class="operation">
            <div class="icon-box"></div>
            <div class="icon-box btn-scale" style="padding-top:8rpx;" :class="{'btn-scale-active':btnScaleShow==2}">
              <image class="detail-out-icon " src="/static/image/home-dislike.png" @click.stop="detailChangeSelect(2)"></image> 
            </div>
            <div class="super-like-icon btn-scale" :class="{'btn-scale-active':btnScaleShow==3}">
              <image class="detail-super-like" src="/static/image/home-super-like.png" @click.stop="detailChangeSelect(3)"></image>
            </div>
            <div class="icon-box btn-scale" style="padding-top:8rpx;"  :class="{'btn-scale-active':btnScaleShow==1}">
              <image class="detail-like-icon" src="/static/image/home-like.png" @click.stop="detailChangeSelect(1)"></image>
            </div>
            <div class="icon-box"></div>
          </div>  

        </div>  
        
      </div>
    </div> 
    
  </div>
  <!--vip-->
  <div v-if="detailVipShow">
    <charge-vip
      :vipType="operationData.vipType"
      :shareType="operationData.shareType"
      :share="operationData.can_share" 
      :aloneType="operationData.aloneType"
      @close="chargeVipClose"
      @successPay="successPay"
    ></charge-vip>
  </div>
</div> 
</template>

<script>
let lastY = 0
let scaleY=1
const PULL_DEFAULT = -1 //默认
const PULL_LT_HEIGHT = 1 //下拉小于高度
const PULL_GT_HEIGHT = 2 //下拉大于高度
const PULL_REFRESHING = 0 //刷新中
let platform = 'ios', scale = 375 / wx.getSystemInfoSync().windowWidth * 2
import * as api from '@/utils/api' ;     
import homeBook from '@/components/home-book.vue' ;   
import chargeVip from '@/components/pop-up-box/charge-vip.vue' ;  
const app = getApp()  

export default { 
  onLoad(opt){    
    if(!opt.userRuuid){
      wx.navigateBack({ delta: 1 });
    } 
    app.aldstat.sendEvent('分享进来的详情'); // 事件名称规范: 不超过255个字符 
    this.statusBarHeight=wx.getStorageSync('systemInfo').statusBarHeight; 
    this.fetchInfo(opt.userRuuid);  
    this.userRuuid=opt.userRuuid;
    // this.fetchInfo('4f63fc5c-365d-425e-956f-4386502902cb');  
  },
  onShow: function () {  
    let vm = this; 
    setTimeout(()=>{
      vm.homePageSwitch=true;
      setTimeout(()=>{
        vm.homePageSwitch=false;
      },500);
    },500); 
      
  }, 
  components:{ 
    homeBook,
    chargeVip
  }, 
  created() {
    platform = wx.getSystemInfoSync().platform
    scale = wx.getSystemInfoSync().windowWidth / 375 * 2
  },
  data () {
    return { 
      userRuuid:'',     
      scrollTop: 0,
      statusBarHeight:20,
      headHeight:wx.getStorageSync('headHeight'),
      headPadding:wx.getStorageSync('headPadding'), 
      userInfo:{},
      imgUrls: [],   
      booksArr:[],
      moviesArr:[],
      musicsArr:[],  
      totalNum:0,
      current:0, 
      offLeft:false,
      offRight:false,
      transformShow:'1,1',
      homePageSwitch:false,

      btnScaleShow:0,  //喜欢超级喜欢按钮
      superLikeTransform:false,  //superLike动画 
      superLikeNum:0, 

      detailVipShow:false,
      operationData:{
        vipType:0,  //通用 超级喜欢  
        can_share:false,
        is_vip:false, 
        shareType:0, 
        aloneType:-1, //  2 超级喜欢
      }, 
    }
  },  
 
  methods: {   
    /**获取用户信息 */
    fetchInfo(val){
      console.log('user_uid',val);
      let vm = this;
      api.getShareUserInfo({ruuid:val}).then(res=>{
        console.log('res',res);
        if(res.data.code==300000){  
          console.log('res',res.data);
          vm.userInfo=res.data.data;
          vm.imgUrls=res.data.data.photo;
          vm.booksArr=res.data.data.books || [];
          vm.moviesArr=res.data.data.movies || [];
          vm.musicsArr=res.data.data.musics || [];
          vm.totalNum=res.data.data.length;
        }
      })
    }, 
    jumpPage(url){ 
      wx.navigateTo({url}); 
    },
    goBack(){  
      app.globalData.userDataInfo.share_login=false; 
      if(wx.getStorageSync('refresh_token')&&wx.getStorageSync('h_token')){ 
        let url = `./../../common/user/main`;
        wx.redirectTo({url});
      } else { 
        wx.navigateBack({ delta: 1 });
      }
    },  
    //影音书
    jumpHomeBook(val){ 
      let url='';
      if(val=='musics'){
         url='./../../user-info/user-books/main?tabsId=1&other_uid='+store.state.userDetail.ruuid
      }else if(val=='movies'){
         url='./../../user-info/user-books/main?tabsId=2&other_uid='+store.state.userDetail.ruuid
      }else if(val=='books'){
         url='./../../user-info/user-books/main?tabsId=3&other_uid='+store.state.userDetail.ruuid
      }
      wx.navigateTo({url});
    }, 
    //监听轮播图
    bindchange(e){  
      this.current=e.mp.detail.current; 
    },
    swiperClis(val){
      let vm = this;
      if(val=='down'){
        if(vm.current==0){
          vm.current=0;
          vm.offLeft=true;
          wx.vibrateShort();
          setTimeout(()=>{
            vm.offLeft=false;
          },200);
          console.log(vm.offLeft);
        }else{
          vm.current--;
        }
      }else{ 
        if(vm.current==vm.imgUrls.length-1){
          vm.current=vm.imgUrls.length-1;
          vm.offRight=true;
          wx.vibrateShort();
          setTimeout(()=>{
            vm.offRight=false;
          },200);
        }else{
          vm.current++;
        } 
      }
    },
        //页面触摸开始事件，必须在触摸开始方法中调用此方法
    handletouchstart(event) {
      lastY = event.touches[0].clientY; 
    },
    //页面触摸移动事件，必须在触摸开始方法中调用此方法
    handletouchmove(event) {
      
      let pageY = event.touches[0].pageY
      let clientY = event.touches[0].clientY 
      let offsetY = clientY - lastY 
      
      if (this.scrollTop > 0 || offsetY<0) return 
      lastY = event.touches[0].clientY 
      // console.log(offsetY);
      if(offsetY>10){ 
        if(scaleY>2){
          scaleY=2;
        }else{
          scaleY+=0.01;
        }
        console.log(scaleY);
        this.transformShow=scaleY+','+scaleY;  
      } 
    },
    //页面触摸结束事件，必须在触摸开始方法中调用此方法
    handletouchend(event) {
      console.log('触摸结束'+event);  
      scaleY=1;
      this.transformShow='1,1';  
    }, 
    //是否是安卓平台
    _isAndriod() {
      return 'ios' == platform
    },
    //喜欢不喜欢
    detailChangeSelect(val){
      let vm = this;
      let url = `./../../common/user/main`;
      let body={
        ruuid:vm.userInfo.ruuid,
        type:val,
        enter_page:1,  //进入页面 1.普通 2.每日精选  3.喜欢我的 
        super_like:vm.userInfo.super_like,  //	对方是否超级喜欢我
        is_top:vm.userInfo.is_top, //对方是否置顶
      };   
      if(!wx.getStorageSync('refresh_token')||!wx.getStorageSync('h_token')){
        app.globalData.userDataInfo.share_login=true;
        wx.navigateBack({ delta: 1 });   
        return;
      }
      if(vm.btnScaleShow==0){
        vm.btnScaleShow=val; 
        api.userpageOperation(body).then(res=>{
          if(res.data.code==300000){
            vm.operationData.can_share=res.data.data.can_share;
            vm.operationData.is_vip=res.data.data.is_vip;
            if(!res.data.data.can_operation){
              vm.detailVipShow=true;
            }
            //超级喜欢成功
            if(val==3){
              app.aldstat.sendEvent('分享页用户详情：超级喜欢');
              if(!res.data.data.can_operation){
                vm.superLikeNum=0;
                vm.operationData.vipType=res.data.data.is_vip?1:0;
                vm.operationData.aloneType=res.data.data.is_vip?2:-1;
                vm.operationData.shareType=2; //超级喜欢 
              } else {
                let contentJson=JSON.stringify({category:1,props:null});
                if(!(app.globalData.recentChatList[(res.data.data.accid)])){
                  app.globalData.recentChatList[(res.data.data.accid)] = 
                  {
                  nickName:res.data.data.nickname,
                  avatar:res.data.data.photo[0].link,
                  content:contentJson,
                  sendTime:(new Date()).valueOf(),
                  msgCategory:5,
                  countA:0,
                  countB:0,
                  }
                }
                vm.superLikeTransform=true; 
                wx.vibrateShort();
                vm.superLikeNum=parseInt(res.data.data.superlike_time)-1; 
                setTimeout(()=>{  
                  vm.superLikeTransform=false;  
                  app.globalData.userDataInfo.share_login=false; 
                  wx.redirectTo({url});
                },1000)  
              } 
            }else if(val==1){  
              app.aldstat.sendEvent('分享页用户详情：喜欢');  
              if(!res.data.data.can_operation){
                vm.operationData.vipType=0;
                vm.operationData.aloneType=-1;
                vm.operationData.shareType=1; //喜欢 
              } else {
                setTimeout(()=>{  
                  app.globalData.userDataInfo.share_login=false; 
                  wx.redirectTo({url});
                },500)
              }
            } else if(val==2){  
              setTimeout(()=>{  
                app.globalData.userDataInfo.share_login=false; 
                wx.redirectTo({url});
              },500)
            }
          } 
        })
        setTimeout(()=>{
          vm.btnScaleShow=0;
        },400)
      } 
    },
     //关闭充值
    chargeVipClose(){
      this.detailVipShow=false;
    },
  },
  onShareAppMessage: function(res) { 
    let selfOpenId = wx.getStorageSync('openId');   
    let age= this.userInfo.age!=''?`${this.userInfo.age}岁`:'';
    let city=  this.userInfo.city!=''?`家住${this.userInfo.city}。`:'。';
    let introduce=  this.userInfo.introduce!=''?`${this.userInfo.introduce}。`:'';
    let title = `${this.userInfo.nickname},${age}${city}来看看你们合不合得来！`;
    let path = `pages/common/login/main?openId=${selfOpenId}&userRuuid=${this.userRuuid}`;  
    let imgLink = this.imgUrls[0].link;
    return this.onShareAppMessage(title,path,imgLink);
  },
  //页面滚动
  onPageScroll: function(event) {
    if (event.scrollTop > 0 && PULL_DEFAULT != this.pullState) {
      //2 * this.scrollTop 两倍表示px转rpx，  所以这里必须进行单位转换
      if (this.dynamicHeight - scale * event.scrollTop < this.refreshHeight) {
        this.pullState = PULL_LT_HEIGHT
      } else {
        this.pullState = PULL_GT_HEIGHT
      }
    }
    this.scrollTop = event.scrollTop
  }, 
  onUnload:function(){ 
    if(wx.getStorageSync('refresh_token')&&wx.getStorageSync('h_token')){
      let url = `./../../common/user/main`;
      wx.redirectTo({url});   
    } 
  },
}
</script> 
 
<style lang="scss" scoped> 
.page-back-transform{ 
  animation:pageBack .4s;
  z-index:10;
}
@keyframes pageBack{
  0%   {transform:rotateZ(0deg);} 
  50%   {transform:translateY(-30px)}
  /*25%  {transform:rotateY(0deg);}*/
  /*50%  {transform:rotateY(0deg);}*/
  100% {transform:rotate(0deg);}
}
@-webkit-keyframes pageBack{
  0%   {transform:rotateZ(0deg);} 
  50%   {transform:translateY(-30px)}
  /*25%  {transform:rotateY(0deg);}*/
  /*50%  {transform:rotateY(0deg);}*/
  100% {transform:rotate(0deg);}
}
.footer-btn{
  width:100%; 
  padding:30rpx 32rpx 0;  
  .shear{ 
    color:#FF5470;
  }
  .report{
    color:#808892;
  }
  .footer-btn-box{
    width:100%; 
    height:112rpx; 
    line-height:112rpx;
    background:#fff;
    border-radius:10rpx;
    border:1rpx solid rgba(225,230,235,1);
    font-size:36rpx;
    font-family:PingFangSC-Medium;
    font-weight:500;
    margin-top:32rpx;
  } 
}
.operation{
  position:fixed;
  bottom:0;
  left:0; 
  width:96.26vw; 
  height:14vh;
  margin:0 14rpx;
  display:flex;
  align-items:center; 
  justify-content:center;
  .icon-box{
    flex:1;
    .detail-out-icon,.detail-like-icon{
      width:144rpx;
      height:144rpx;
    } 
  }
  .super-like-icon{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    .detail-super-like{
      width:112rpx;
      height:112rpx;
    }
  }
  .btn-scale{
    transform: scale(1)  !important;
    transition: all .2s  !important;
  }
  .btn-scale-active{
    transform: scale(.6) !important;
    transition: all .2s !important;
  }
}
.audio-book{
  padding-bottom:220rpx !important;
}

.select-out-img , .like-img ,.super-like-img{
  position: absolute;
}
.like-img  .img,.super-like-img .img{
  width:100%;
  height:100%;
}
.like-img{
  width:300rpx;
  height:198rpx; 
  top:5vh;
  left:6.4vw;
}
.super-like-img{
  width:418rpx;
  height:256rpx;
  left:50%;
  margin-left:-209rpx;
  bottom:164rpx;
}

.super-like-transform{ 
  animation:myfirst 1s;
}

@keyframes myfirst{
  0%   {transform:translateY(0px) rotateY(0deg);-webkit-transform:translateY(0px) rotateY(0deg);}
  25%   {transform:translateY(-120px) rotateY(0deg);-webkit-transform:translateY(-120px) rotateY(0deg);}
  50%   {transform:translateY(-120px) rotateY(360deg);-webkit-transform:translateY(-120px) rotateY(360deg);}
  /*25%  {transform:rotateY(0deg);}*/
  /*50%  {transform:rotateY(0deg);}*/
  100% {transform:rotate(0deg);-webkit-transform:rotate(0deg);}
}
@-webkit-keyframes  myfirst{
  0%   {transform:translateY(0px) rotateY(0deg);-webkit-transform:translateY(0px) rotateY(0deg);}
  25%   {transform:translateY(-120px) rotateY(0deg);-webkit-transform:translateY(-120px) rotateY(0deg);}
  50%   {transform:translateY(-120px) rotateY(360deg);-webkit-transform:translateY(-120px) rotateY(360deg);}
  /*25%  {transform:rotateY(0deg);}*/
  /*50%  {transform:rotateY(0deg);}*/
  100% {transform:rotate(0deg);-webkit-transform:rotate(0deg);}
} 
.superlike_num{ 
  width:144rpx;
  height:144rpx;
  line-height:144rpx;
  border-radius: 50%;
  background:#fff;
  box-shadow:0  2rpx 8rpx 0  rgba(153,178,217,0.59);
  color:#28B5FF;
  font-size:65rpx; 
  text-align: center;
}
.tabbar-item{
  padding-right:0;
  padding-left:0;
  background:transparent;
  line-height:1; 
}
</style>
